<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>会员分析</h3>
			<h4>概览</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<dl class="biz-member-view">					
				<a href="#" data-res="30" class="active">30天</a>
				<a href="#" data-res="1" class="">自然月</a>
				<i class="fa fa-question-circle fa-2x"></i>
				<span class="export-key">导出智能月报</span>
			</dl>
			<div class="biz-member-view-tubiao">
				<dl>
					<dt>
						<span>07月09日~09月06日贡献分析</span>
						<i class="fa fa-question-circle fa-2x"></i>
						<span>更多></span>
					</dt>					
					<div class="echarts_box"  id="main"></div>
				</dl>
				<dl>
					<dt><span>03月17日~04月17日消费构成分析</span><i class="fa fa-question-circle fa-2x"></i><span>更多></span></dt>					
					<div class="echarts_box" id="main1"></div>
				</dl>
				<dl>
					<dt><span>03月17日~04月17日留存分析</span><i class="fa fa-question-circle fa-2x"></i><span>更多></span></dt>					
					<div class="echarts_box" id="main2"></div>
				</dl>
				<dl>
					<dt><span>03月17日~04月17日行为变化分析</span><i class="fa fa-question-circle fa-2x"></i><span>更多></span></dt>	
					<dt style="width:94%;"><span>07月09日~08月07日</span><span style="color: #000000;">08月08日~09月06日</span></dt>
					<div class="echarts_box" id="main3"></div>
				</dl>
			</div>
		</div>			
		<!--/deer-content-->
	</section>
	<!--js-->
		<aside>
			<script type="text/javascript" src="../layui/layui.js" ></script>
			<script type="text/javascript" src="../js/echarts.min.js" ></script>
			<script type="text/javascript">
				layui.use(['jquery','layer'],function(){					
					var $=layui.jquery;	
					var layer=layui.layer;					
					$('.export-key').bind('click',function(){
						layer.open({
							title:"智能月报导出",
							shadeClose: true,
						    type: 2,
						    offset: ['150px', '25%'],
						    area: ['50%', '700px'],
						    content:"会员分析-概览-智能月报导出.html"
						})
			    	})
					
					//条件切换
				$(".biz-member-view a").click(function(){
					$(this).addClass("active").siblings().removeClass("active")
				})
				})	
				
				//贡献分析
		        var myChart = echarts.init(document.getElementById('main'));
		        // 指定图表的配置项和数据
		        var option = {
		            title: {
		                text: '消费频次人数环比',
		                left: 'center',
		                subtext: ''
		            },
		            tooltip: {
		                trigger: 'axis',
		                axisPointer: {
		                    type: 'shadow'
		                }
		            },
		            legend: {
		                data: ['07月09日~08月07日消费', '08月08日~09月06日消费'],
		                bottom:0
		            },
		            grid: {
		                left: '3%',
		                right: '4%',
		                bottom: '8%',
		                containLabel: true
		            },
		            yAxis: {
		            	name:'人',
		                type: 'value',
		                boundaryGap: [0, 0.01]
		            },
		            xAxis: {
		                type: 'category',
		                data: ['低频用户','中频用户','中高频用户','高频用户']
		            },
		            series: [
		                {
		                    name: '07月09日~08月07日消费',
		                    type: 'bar',
		                    barWidth: '35%',
		                    data: [1820, 2348, 2904, 5904]
		                },
		                {
		                    name: '08月08日~09月06日消费',
		                    type: 'bar',
		                    barWidth: '35%',
		                    data: [1932, 2348, 3100, 5100]
		                }
		            ]
		        };			     
		        myChart.setOption(option);

		    	//消费构成分析
			    var myChart = echarts.init(document.getElementById('main1'));
				// 指定图表的配置项和数据
		        var option = {
		            title : {
		                text: '',
		                subtext: '',
		                x:'center'
		            },
		            legend: {
		                align: 'left',
		                // left: 10,
		                data:['睡眠会员','留存会员','新增会员']
		            },
		            series : [
		                {
		                    name: '访问来源',
		                    type: 'pie',
		                    radius: ['36%', '55%'],
		                    center: ['50%', '52%'],
		                    data:[
		                        {value:234, name:'睡眠会员'},
		                        {value:135, name:'留存会员'},
		                        {value:548, name:'新增会员'}
		                    ]
		                }
		            ]
		        };
		        myChart.setOption(option);
		        
		       	//留存分析
		        var myChart = echarts.init(document.getElementById('main2'));
		        // 指定图表的配置项和数据
		        var option = {
		            title: {
		                text: '留存人数',
		                left: 'center',
		                subtext: ''
		            },
		            tooltip: {
		                trigger: 'axis',
		                axisPointer: {
		                    type: 'shadow'
		                }
		            },
		            legend: {
		                data: ['上一周期消费人数', '当前周期消费人数'],
		                bottom:0
		            },
		            grid: {
		                left: '3%',
		                right: '4%',
		                bottom: '8%',
		                containLabel: true
		            },
		            yAxis: {
		            	name:'人',
		                type: 'value',
		                boundaryGap: [0, 0.01]
		            },
		            xAxis: {
		                type: 'category',
		                data: ['低频用户','中频用户','中高频用户','高频用户']
		            },
		            series: [
		                {
		                    name: '上一周期消费人数',
		                    type: 'bar',
		                    barWidth: '15%',
		                    data: [1820, 2348, 2904, 5904]
		                },
		                {
		                    name: '当前周期消费人数',
		                    type: 'bar',
		                    barWidth: '15%',
		                    data: [1932, 2348, 3100, 5100]
		                }
		            ]
		        };
		        myChart.setOption(option);
		        
		        //行为变化分析
		    	var myChart = echarts.init(document.getElementById('main3'));
			    model= {
			        "nodes": [
			            {
			                "id": "a1",
			                "name": "无消费"
			            },
			            {
			                "id": "a2",
			                "name": "低频用户"
			            },
			            {
			                "id": "a3",
			                "name": "中频用户"
			            },
			            {
			                "id": "a4",
			                "name": "中高频用户"
			            },
			            {
			                "id": "a5",
			                "name": "高频用户"
			            },
			            {
			                "id": "b1",
			                "name": "无消费"
			            },
			            {
			                "id": "b2",
			                "name": "低频用户"
			            },
			            {
			                "id": "b3",
			                "name": "中频用户"
			            },
			            {
			                "id": "b4",
			                "name": "中高频用户"
			            },
			            {
			                "id": "b5",
			                "name": "低频用户"
			            }
			        ],
			        "links": [
			            {
			                "source": "a1",
			                "target": "b1",
			                "value": 0.342284047256003
			            },
			            {
			                "source": "a1",
			                "target": "b2",
			                "value": 0.32322870366987
			            },
			            {
			                "source": "a1",
			                "target": "b3",
			                "value": 0.177682517071359
			            },
			            {
			                "source": "a1",
			                "target": "b4",
			                "value": 0.133681507072122
			            },
			            {
			                "source": "a1",
			                "target": "b5",
			                "value": 0.133681507072122
			            },
			            {
			                "source": "a2",
			                "target": "b1",
			                "value": 0.342284047256003
			            },
			            {
			                "source": "a2",
			                "target": "b2",
			                "value": 0.32322870366987
			            },
			            {
			                "source": "a2",
			                "target": "b3",
			                "value": 0.177682517071359
			            },
			            {
			                "source": "a2",
			                "target": "b4",
			                "value": 0.133681507072122
			            },
			            {
			                "source": "a2",
			                "target": "b5",
			                "value": 0.133681507072122
			            },
			            {
			                "source": "a3",
			                "target": "b1",
			                "value": 0.342284047256003
			            },
			            {
			                "source": "a3",
			                "target": "b2",
			                "value": 0.32322870366987
			            },
			            {
			                "source": "a3",
			                "target": "b3",
			                "value": 0.177682517071359
			            },
			            {
			                "source": "a3",
			                "target": "b4",
			                "value": 0.133681507072122
			            },
			            {
			                "source": "a3",
			                "target": "b5",
			                "value": 0.133681507072122
			            },
			            {
			                "source": "a4",
			                "target": "b1",
			                "value": 0.342284047256003
			            },
			            {
			                "source": "a4",
			                "target": "b2",
			                "value": 0.32322870366987
			            },
			            {
			                "source": "a4",
			                "target": "b3",
			                "value": 0.177682517071359
			            },
			            {
			                "source": "a4",
			                "target": "b4",
			                "value": 0.133681507072122
			            },
			            {
			                "source": "a4",
			                "target": "b5",
			                "value": 0.133681507072122
			            },
			            {
			                "source": "a5",
			                "target": "b1",
			                "value": 0.342284047256003
			            },
			            {
			                "source": "a5",
			                "target": "b2",
			                "value": 0.32322870366987
			            },
			            {
			                "source": "a5",
			                "target": "b3",
			                "value": 0.177682517071359
			            },
			            {
			                "source": "a5",
			                "target": "b4",
			                "value": 0.133681507072122
			            },
			            {
			                "source": "a5",
			                "target": "b5",
			                "value": 0.133681507072122
			            }
			
			        ]
			    }
			
			    option = {
			        title: {
			            text: ''
			        },
			        tooltip: {
			            trigger: 'item',
			            triggerOn: 'mousemove'
			
			        },
			        color:['red','green','black','blue','#fff'],
			        series: [
			            {
			                type: 'sankey',
			                layout:'none',
			                data: model.nodes,
			                links: model.links,
			                itemStyle: {
			                    normal: {
			                        borderWidth: 1,
			                        borderColor: '#aaa'
			                    }
			                },
			                lineStyle: {
			                    normal: {
			                        //color:'red',
			                        color:'blue',
			                        curveness: 0.5
			                    }
			                },
			                label: {
			                    normal: {
			                        formatter: function(params) {
			                            return params.name;
			                        }
			                    }
			                }
			            }
			        ]
			    }			
			    myChart.setOption(option);
		</script>
	</aside>
		<!--/js-->
</body>
</html>
